<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <user-search @search="reload" />
      <!-- 数据表格 -->
      <ele-pro-table ref="table"
                     :columns="columns"
                     :datasource="datasource"
                     :selection.sync="selection"
                     cache-key="systemUserTable">
        <!-- 表头工具栏 -->
        <!-- <template v-slot:toolbar> -->
        <!-- <el-button size="small"
                     type="primary"
                     icon="el-icon-plus"
                     class="ele-btn-icon"
                     @click="openWeInbound(1)">
            新建账户
          </el-button> -->

        <!--          <el-button-->
        <!--            size="small"-->
        <!--            icon="el-icon-upload2"-->
        <!--            class="ele-btn-icon"-->
        <!--            @click="openImport"-->
        <!--          >-->
        <!--            导入-->
        <!--          </el-button>-->
        <!-- </template> -->
        <template v-slot:accountType="{ row }">
          <el-tag :type="row.accountType == '1' ? 'success' : ''">
            {{ accountType(row.accountType) }}
          </el-tag>
        </template>
        <template v-slot:currentStatus="{ row }">
          <el-tag :type="applyForType(row.currentStatus).type">
            {{ applyForType(row.currentStatus).status }}
          </el-tag>
        </template>
        <!-- 状态列 -->
        <template v-slot:invoiceUrl="{ row }">
          <el-tag v-if="(row.invoiceType=='1')"
                  type="danger">无需发票</el-tag>
          <el-tag v-if="(row.invoiceType=='2')"
                  type="success">需要发票</el-tag>
          <div style="margin-top: 5px;"
               v-if="(row.invoiceType=='2')">

            <el-link type="primary"
                     :underline="false"
                     icon="el-icon-view"
                     @click="openInvoice(row)">
              查看
            </el-link>

            <!-- <el-link 
            v-if="row.has_fp==1"
              type="primary"
              :underline="false"
              icon="el-icon-upload"
              @click="openAddInvoice(row)"
            >
              开票
            </el-link>

            <el-link 
             v-else="row.has_fp==2"
              type="primary"
              :underline="false"
              icon="el-icon-upload"
              @click="openAddInvoice(row)"
            >
              重开
            </el-link> -->

            <el-link type="primary"
                     :underline="false"
                     icon="el-icon-_download"
                     @click="handleDownload(row)">
              下载发票
            </el-link>
          </div>

        </template>
        <!-- 操作列 -->
        <template v-slot:action="{ row }">
          <el-link type="danger"
                   icon="el-icon-document-delete"
                   :underline="false"
                   @click="rejectionReasonFn(row.groundsForRejection)"
                   v-if="
             row.currentStatus ==
              '3'
            ">
            驳回原因
          </el-link>

          <el-popconfirm class="ele-action"
                         title="是否确定要删除该笔体现记录信息"
                         @confirm="remove(row)">
            <template v-slot:reference>
              <el-link type="danger"
                       :underline="false"
                       icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </el-card>

    <el-image-viewer v-if="showViewer"
                     style="z-index: 9999"
                     :on-close="closeViewer"
                     :url-list="urlListArray" />
    <el-dialog :visible.sync="dialogVisible"
               width="845px">

      <iframe :src="iframeUrl"
              height="900px;"
              width="800px"></iframe>

    </el-dialog>
    <!-- 导入弹窗 -->
    <user-import :visible.sync="showImport"
                 @done="reload" />

    <el-drawer :visible.sync="drawer"
               size="70%"
               :before-close="handleClose"
               ref="drawer"
               :with-header="false">
      <!-- 审核失败的 -->
      <div class="fromSubmitThree">
        <img src="../../../static/examineFail.png"
             alt="" />
        <div class="examine">驳回原因</div>
        <div style="color: '#666'; text-indent: 3ch;">{{ rejectionReasonData }}</div>
        <div class="resubmit"
             @click="drawer=false"
             round>关闭页面</div>
      </div>
    </el-drawer>
    <!-- <UserEdit :visible.sync="visible"
              :data="rejectionReasonData"></UserEdit> -->
  </div>
</template>

<script>
import UserSearch from './components/user-search.vue';
import UserEdit from './components/user-edit.vue';
import UserImport from './components/user-import.vue';
import EquipmentEdit from './components/equipment-edit.vue';
import RegionsSelect from '@/components/RegionsSelect/index.vue';
import { reflectPageList, reflectPageListDelete } from '@/api/oem/index'

import {
  pageMerchant,
  removeUsers,
  updateUserStatus,
  resetPassword,
  updateUserPassword,
  pageAgencyType
} from '@/api/oem';
import { JSEncrypt } from 'jsencrypt';
// 导入组件
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
import Steps from '@/components/Steps/Steps.vue';
export default {
  name: 'reflectionRecord',
  components: {
    UserSearch,
    EquipmentEdit,
    UserEdit,
    UserImport,
    ElImageViewer,
    Steps,
    RegionsSelect
  },
  data () {
    return {
      rejectionReasonData: '',
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false,
      // 图片预览
      showViewer: false,
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      //   useIframePdf: false,
      iframeUrl: '',
      // 是否弹框
      drawer: false,
      urlListArray: ['https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/invoiceUrl/1692408167892.pdf'],
      // 表格列配置
      columns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          fixed: 'left',
          sortable: true
        },
        {
          columnKey: 'index',
          type: 'index',
          label: '序号',
          width: 60,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left',
          sortable: true
        },

        {
          prop: 'oemCode',
          label: '代理名称',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 80,
          sortable: true
        },

        {
          prop: 'withdrawalAmount',
          label: '申请金额',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 80,
          sortable: true
        },
        {
          prop: 'accountType',
          label: '收款类型',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 110,
          slot: 'accountType',
          sortable: true,
          align: 'center',
        },
        {
          prop: 'receivingAccount',
          label: '收款账户',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 110,
          sortable: true,
          align: 'center',
        },
        {
          prop: 'currentStatus',
          label: '当前状态',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 110,
          sortable: true,
          slot: 'currentStatus',
          align: 'center',
        },

        {
          prop: 'invoiceUrl',

          label: '发票上传',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 150,
          slot: 'invoiceUrl',
          align: 'center',
          sortable: true,
        },

        {
          prop: 'createDate',
          label: '申请时间',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 150,
          sortable: true,
          align: 'center',
          formatter: (_row, _column, cellValue) => {
            return this.$util.toDateString(cellValue);
          }
        },

        {
          columnKey: 'action',
          label: '操作',
          width: 180,
          align: 'center',
          resizable: false,
          slot: 'action',
          showOverflowTooltip: true,

          fixed: 'right'
        }
      ],
      // 表格选中数据
      selection: [],
      // 当前编辑数据
      current: null,
      visible: false,
      // 是否显示导入弹窗
      showImport: false,
      //是否显示划拨编辑弹窗
      showTransfer: false,
      showViewer: false, // 显示查看器

      labelPosition: 'top',

      //   表单的收集

      sumbitForm: {
        // 账户类型
        accountType: '1',
        // 真实姓名
        realName: '',
        // 收款账号
        accountNumber: '',
        // 开户银行
        bankDeposit: '',
        // 开户网点
        accountOpeningNetwork: '',
        // 备注
        notes: ''
      },

    };
  },
  // 路由刷新
  activated () {
    this.init();
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    },
    applyForType () {
      return function (applyType) {
        if (applyType == '1') {
          return {
            status: '申请中',
            type: ''
          };
        } else if (applyType == '2') {
          return {
            status: '已经通过',
            type: 'success'
          };
        } else {
          return {
            status: '已经驳回',
            type: 'danger'
          };
        }
      };
    },
    accountType () {
      return function (applyType) {
        if (applyType == '1') {
          return '银行卡';
        } else {
          return '支付宝';
        }
      };
    },
  },
  watch: {
    'sumbitForm.accountType': function (newVal) {
      // 响应 prop1 的变化
      console.log('prop1 发生了变化', newVal);
      if (newVal == 1) {
        this.sumbitForm.accountType = 1;
      } else {
        this.sumbitForm.accountType = 2;
      }
    }
  },
  methods: {
    //  驳回原因
    rejectionReasonFn (rejection) {
      this.rejectionReasonData = rejection
      this.drawer = true
    },
    handleClose (done) {
      this.$confirm('是否要返回提现记录页面？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
    // 表单重置
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    // 对正则进行校验 ok了进行下一步
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //如果成功那么进入下一步
          if (this.currentStepIndex == 1) {
            this.currentStepIndex = 2;
            return;
          } else if (this.currentStepIndex == 2) {
            this.currentStepIndex = 3;

            // 这里进行合并提交
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 下载图片

    handleDownload (file) {
      console.log(file)
      window.open(file.invoiceUrl
      );
    },

    // 查看图片
    openInvoice (row) {
      console.log(row.invoiceUrl)
      var ext = row.invoiceUrl.substring(row.invoiceUrl.lastIndexOf(".") + 1);
      console.log(ext)
      if (ext == 'pdf') {

        this.dialogVisible = true
        this.iframeUrl = row.invoiceUrl
      } else {
        this.showViewer = true
        this.urlListArray = [row.invoiceUrl]
      }


    },
    // 查询代理类型
    init () {
      this.reload()
    },
    // 关闭查看器
    closeViewer () {
      this.showViewer = false;
    },
    /* 表格数据源 */
    datasource ({ page, limit, where, order }) {
      //   console.log(where, order);
      //   if (!where.deleted) where.deleted = 0;
      //   console.log(reflectPageList({ ...where, ...order, page, limit, oemId: this.$store.state.user.info.oemId }).then((res) => {
      //     console.log(res)
      //   }))
      return reflectPageList({ ...where, ...order, page, limit, oemId: this.$store.state.user.info.oemId });
    },
    /* 刷新表格 */
    reload (where) {
      console.log('where', where);
      this.$refs.table.reload({ where: where });
    },
    modifyRate () {
      this.current = null;
      this.showEdit = true;
    },
    /* 打开划拨编辑弹窗 */
    openTransfer (row) {
      this.current = row;
      this.showTransfer = true;
    },
    /* 打开导入弹窗 */
    openImport () {
      this.showImport = true;
    },
    /* 删除 */
    remove (row) {
      const loading = this.$loading({ lock: true });
      reflectPageListDelete({ id: row.id })
        .then((msg) => {
          loading.close();
          this.$message.success(msg);
          this.reload();
        })
        .catch((e) => {
          loading.close();
          this.$message.error(e.message);
        });
    },
    /*重置密码*/
    resets (row) {
      const loading = this.$loading({ lock: true });
      console.log('row', row);
      resetPassword({ id: row.id })
        .then((msg) => {
          loading.close();
          this.$message.success(msg);
          this.reload();
        })
        .catch((e) => {
          loading.close();
          this.$message.error(e.message);
        });
    },
    /* 批量删除 */
    removeBatch () {
      if (!this.selection.length) {
        this.$message.error('请至少选择一条数据');
        return;
      }
      this.$confirm('确定要删除选中的代理吗?', '提示', {
        type: 'warning'
      })
        .then(() => {
          const loading = this.$loading({ lock: true });
          removeUsers({ ids: this.selection.map((d) => d.id) })
            .then((msg) => {
              loading.close();
              this.$message.success(msg);
              this.reload();
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
        })
        .catch(() => { });
    },

  }
};
</script>

<style lang="less" scoped>
.ele-body {
  min-width: 400px;
}
/deep/ .el-drawer__body {
  min-width: 1000px !important;
}
/deep/.el-select {
  min-width: 100%;
}
/deep/ .el-drawer__body {
  display: flex;
  align-items: center;
  justify-content: center;
}
.el-row {
  padding: 30px;
}
.el-row-active {
  padding: 30px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fromSubmitThree {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px 280px;
  line-height: 1.5;

  min-width: 1180px;
  .examine {
    color: #000;
    margin-bottom: 29px;
    font-size: 24px;
  }
  .closePage {
    width: 186px;
    height: 60px;
    border-radius: 43px;
    border: 1px solid #1e6ceb;
    color: #1e6ceb;
    margin-top: 57px;
  }
  .resubmit {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 186px;
    height: 60px;
    border-radius: 43px;
    background: #ff4d4f;
    box-shadow: 0px 4px 4px 0px #ff4d4f;
    margin-top: 57px;
  }
}
.fromSubmitOne {
  .hLabel {
    margin: 10px 0 20px;
    font-weight: 700;
    &::before {
      content: '';
      display: inline-block;
      vertical-align: top;

      margin-right: 5px;
      height: 23px;
      width: 6px;
      background-color: #1e6ceb;
    }
  }
  .ruleForm {
    /deep/.el-form-item__label {
      color: #000;
    }
    /deep/.el-form-item {
      max-width: 737px;
      min-width: 337px;
    }
    span {
      color: #b4b4b4;
    }
    .prompt {
      margin-bottom: 50px;
      span {
        font-weight: 700;
        font-size: 19px;
        color: #000;
      }
      .text {
        margin-top: 30px;
        white-space: wrap;
        margin-bottom: 10px; /* 调整间隔大小 */
      }
    }
  }
  .drawer__footer {
    display: flex;
    justify-content: space-evenly;
  }
}
</style>
